<template>
  <base-content style="padding: 20px">
    <q-form @submit="getStuScoreStat" class="flex q-gutter-md">
      <q-select
        name="preferred_genre"
        v-model="semesterPreferred"
        :options="semesterOption"
        :option-label="(item) => item === null ? null : item.semesterYear + ' ' + item.semesterType"
        :option-value="(item) => item === null ? null : item.semesterId"
        color="primary"
        filled
        label="请选择学期"
        style="width: 300px;"
      />
      <q-btn icon="search" label="查询学业预警数据" type="submit" color="primary"/>
    </q-form>
    <q-table
      :title="currentUserInfo.studentNumber+' '+studentScoreTable.scoreWarnLevel"
      :loading="studentScoreTable.loading"
      style="margin-top: 20px"
      :data="studentScoreTable.data"
      :columns="studentScoreTable.columns"
      :filter="studentScoreTable.filter"
      row-key="name"
      no-data-label="没有找到任何信息"
    >
      <template v-slot:top>
        <div style="font-size: 1.32rem">
          {{currentUserInfo.studentNumber+' 您的预警等级为：'}}
          <span :style="colorChange(studentAttendTable.AttendWarnLevel)">{{studentAttendTable.AttendWarnLevel}}</span>  请重视！
        </div>
      </template>
      <!-- 自定义无数据插槽 -->
      <template v-slot:no-data="{ icon, message, filter }">
        <div class="full-width row flex-center text-primary q-gutter-sm">
          <q-icon size="2em" name="sentiment_dissatisfied"/>
          <span>
             {{ message }}
          </span>
          <q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon"/>
        </div>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td :props="props" key="semesterYear">{{props.row.semesterYear}}</q-td>
          <q-td :props="props" key="semesterType">{{props.row.semesterType}}</q-td>
          <q-td :props="props" key="studentNumber">{{props.row.studentNumber}}</q-td>
          <q-td :props="props" key="studentRealName">{{props.row.studentRealName}}</q-td>
          <q-td :props="props" key="studentSex">{{props.row.studentSex}}</q-td>
          <q-td :props="props" key="gradeId">{{props.row.gradeId}}</q-td>
          <q-td :props="props" key="collegeName">{{props.row.collegeName}}</q-td>
          <q-td :props="props" key="majorName">{{props.row.majorName}}</q-td>
          <q-td :props="props" key="className">{{props.row.className}}</q-td>
          <q-td :props="props" key="courseType">{{props.row.courseType}}</q-td>
          <q-td :props="props" key="failExams">{{props.row.failExams}}</q-td>
          <q-td :props="props" key="operating">
            <q-btn label="查看详情" @click="detail(props.row.studentNumber)"/>
          </q-td>
        </q-tr>
      </template>
    </q-table>
  </base-content>
</template>

<script>
import BaseContent from '../../components/BaseContent/BaseContent'
export default {
  name: 'ParentScore',
  components: { BaseContent },
  data () {
    return {
      currentUserInfo: JSON.parse(sessionStorage.getItem('user_object')),
      semesterPreferred: { semesterId: '', semesterType: '', semesterYear: '' }, // 设置默认值为空
      semesterOption: [], // 这里是数据库返回的数据，数组里的对象用item标识
      submitEmpty: false,
      submitResult: [],
      studentScoreTable: {
        loading: false,
        filter: '',
        scoreWarnLevel: '', // 绑定的是判断到的预警等级，位置表头
        columns: [
          { name: 'semesterYear', label: '学年', align: 'left', field: 'semesterYear', sortable: true },
          { name: 'semesterType', label: '学期', align: 'left', field: 'semesterType', sortable: true },
          { name: 'studentNumber', label: '学号', align: 'left', field: 'studentNumber', sortable: true },
          { name: 'studentRealName', label: '姓名', align: 'left', field: 'studentRealName' },
          { name: 'studentSex', label: '性别', align: 'left', field: 'studentSex' },
          { name: 'gradeId', label: '年级', align: 'left', field: 'gradeId' },
          { name: 'collegeName', label: '学院', align: 'left', field: 'collegeName', sortable: true },
          { name: 'majorName', label: '专业', align: 'left', field: 'majorName', sortable: true },
          { name: 'className', label: '班级', align: 'left', field: 'className', sortable: true },
          { name: 'courseType', label: '课程类型', align: 'left', field: 'courseType', sortable: true },
          { name: 'failExams', label: '挂科数', align: 'left', field: 'failExams', sortable: true },
          { name: 'operating', label: '操作', align: 'center', field: 'operating' }
        ],
        data: []
      }
    }
  },
  mounted () {
    this.getAllSemesterYear()
  },
  methods: {

    /**
     * 获取学期显示在下拉框
     */
    getAllSemesterYear () {
      const queryYear = {
        url: '/getAllSemesterServlet',
        methods: 'get'
      }
      this.$fetchData(queryYear).then(res => {
        if (res.data !== null) {
          console.log(res)
          this.semesterPreferred = res.data[res.data.length - 1]// 绑定的默认数据为最新的学期
          this.semesterOption = res.data// 将获取到的学期数据返回下拉框的选择里
        } else {
          this.$q.notify({
            icon: 'announcement',
            message: '获取记录为空',
            color: 'red',
            position: 'top',
            timeout: 1500
          })
        }
      }).catch(e => {
        console.log(e)
      })
    },

    /**
     * 查询登录学生学业预警数据
     */
    getStuScoreStat () {
      this.studentScoreTable.loading = true
      const queryYear = {
        url: '/StudentScoreServlet',
        methods: 'get',
        params: {
          username: this.currentUserInfo.studentNumber,
          year: this.semesterPreferred.semesterYear,
          type: this.semesterPreferred.semesterType
        }
      }
      this.$fetchData(queryYear).then(res => {
        console.log(res)
        this.studentScoreTable.data = res.data// 将查询结果放在表格数据，执行完该查询之后再进行学业预警等级的判断
        const queryScoreRank = {
          url: '/ScoreRankServlet',
          methods: 'get'
        }
        this.$fetchData(queryScoreRank).then(res => {
          // 每个学生每个学期按课程类型来分会有两条数据，因此要结合两条数据来判断预警等级
          let t = 0// 只有一条数据时的初始值
          this.studentScoreTable.data.forEach(i => {
            t += i.failExams
          })
          console.log(res)// 获得了预警等级表的查询结果
          for (let i = 0; i < res.data.length; i++) { // 遍历预警等级表
            for (let j = 0; j < this.studentScoreTable.data.length; j++) { // 遍历成绩表
              const standard = { label: '', biaoz: 10000 }
              if (res.data[j].warningId === 0) { // 定义降级对象的标准和等级
                standard.biaoz = res.data[j].warningStandardStart
                standard.label = res.data[j].warningRank
              }
              // 已经拿到该登录学生的查询数据和预警等级表，先判断必修课挂科数是否为5，是则降级
              if (this.studentScoreTable.data[j].courseType === '必修课' && this.studentScoreTable.data[j].failExams >= standard.biaoz) {
                // this.studentScoreTable.data[j].down = standard.label
                this.studentScoreTable.scoreWarnLevel = standard.label
                this.studentScoreTable.loading = false// 手动停止加载
                return
              }
              if (t >= res.data[i].warningStandardStart && t <= res.data[i].warningStandardEnd) { // 与标准进行比较
                this.studentScoreTable.scoreWarnLevel = res.data[i].warningRank// 得出学生预警等级
                console.log(this.studentScoreTable.scoreWarnLevel)
                this.studentScoreTable.loading = false
                return
              }
            }
          }
          this.studentScoreTable.loading = false
          console.log(666)
        }).catch(e => {
          console.log(e)
        })
      }).catch(e => {
        console.log(e)
      })
    },

    /**
     * 查看明细
     * @param e
     */
    detail (e) {
      this.$router.push({
        path: '/failsExams',
        query: {
          stuN: e
        }
      })
    }
  },
  computed: {
    colorChange () {
      return (e) => {
        if (e === '蓝色预警') {
          return { color: 'blue' }
        } else if (e === '黄色预警') {
          return { color: 'yellow' }
        } else if (e === '橙色预警') {
          return { color: 'orange' }
        } else if (e === '红色预警') {
          return { color: 'red' }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
